// rec
import React, { Component } from "react";
import { Button, Form, Input, Spin, Card, message } from "antd";
import { UserOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import { _register } from "../../util/api/user/index";

import "./register.css";

export default class Register extends Component {
  onFinish = (values) => {
    let data = {
      user_email: values.user_email,
      user_name: values.user_name,
      user_pwd: values.user_pwd,
    };
    _register(data).then((res) => {
      if (res.data.code === 0 && res.status === 200) {
        let data = res.data.data;
        if (data.code === 0) {
          //成功
          console.log(data);
          message.success(data.msg).then(() => {
            window.history.back();
          });
        } else {
          console.log(data);
          message.warning(data.msg);
        }
      }
    }).catch(e=>{
      console.log(e);
      message.error('服务器错误')
    });
  };
  render() {
    return (
      <div className="register-div">
        <Spin tip="Loading..." spinning={false}>
          <Card title="AI System" bordered={true} style={{ width: 400 }}>
            <Form
              name="register"
              onFinish={this.onFinish}
              labelAlign="left"
              scrollToFirstError
            >
              <Form.Item
                name="user_email"
                // label="E-mail"
                rules={[
                  {
                    type: "email",
                    message: "此邮箱无效!",
                  },
                  {
                    required: true,
                    message: "请输入你的 E-mail!",
                  },
                ]}
              >
                <Input
                  prefix={<MailOutlined className="site-form-item-icon" />}
                  placeholder="邮箱"
                />
              </Form.Item>

              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: "请输入你的密码!",
                  },
                ]}
                hasFeedback
              >
                {/* <Input.Password /> */}
                <Input.Password
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="密码"
                  maxLength={20}
                  // minLength={6}
                />
              </Form.Item>

              <Form.Item
                name="user_pwd"
                dependencies={["password"]}
                hasFeedback
                rules={[
                  {
                    required: true,
                    message: "请输入确认密码!",
                  },
                  ({ getFieldValue }) => ({
                    validator(rule, value) {
                      if (!value || getFieldValue("password") === value) {
                        return Promise.resolve();
                      }

                      return Promise.reject("俩次输入密码不同!");
                    },
                  }),
                ]}
              >
                <Input.Password
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="确认密码"
                  maxLength={15}
                  // minLength={6}
                />
              </Form.Item>

              <Form.Item
                name="user_name"
                rules={[
                  {
                    required: true,
                    message: "请输入你的姓名!",
                    whitespace: false,
                  },
                ]}
              >
                <Input
                  type='text'
                  prefix={<UserOutlined className="site-form-item-icon" />}
                  placeholder="姓名"
                  // maxLength={6}
                />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" block>
                  <span>注册</span>
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Spin>
      </div>
    );
  }
}

